<template>
    <ContentBox title="数字牧场">
        <div class="digitafarmRight">

            <div class="left">
                <div class="top">
                    <div class="small-header">
                        <div>【汉羊牧场】</div>
                        <div></div>
                    </div>

                    <div class="hl_content">
                        <div>
                            <span>
                                <div>
                                    <img src="../../assets/image/muchangmc.png" alt="">
                                </div>
                                牧场名称:
                            </span>
                            <span>汉羊牧业</span>
                        </div>
                        <div>
                             <span>
                               <div>
                                    <img src="../../assets/image/siyangpinzhong.png" alt="">
                               </div>
                                饲养品种:
                            </span>
                            <span>50湖羊</span>
                        </div>
                        <div>
                             <span>
                                <div>
                                    <img src="../../assets/image/nianchulanshu.png" alt="">
                                </div>
                                年出栏树:
                             </span>
                            <span>25只</span>
                        </div>
                        <div>
                             <span>
                                <div>
                                    <img src="../../assets/image/dongsheshuliang.png" alt="">
                                </div>
                                栋舍数量:
                             </span>
                            <span>25个</span>
                        </div>
                        <div>
                             <span>
                                <div>
                                    <img src="../../assets/image/yuangongshuliang.png" alt="">
                                </div>
                                员工数量:
                             </span>
                            <span>25人</span>
                        </div>

                    </div>
                </div>

                <div class="content">
                    <div class="small-header" style="margin-top: 40px;">
                        <div>【年度牲畜信息】</div>
                        <div></div>
                    </div>

                    <div class="bottom">
                        <div style="flex:1;">
                            <nianduchushengxinxi></nianduchushengxinxi>
                            <!--<Demo></Demo>-->
                        </div>
                        <div class="bottom_bottom">
                            <div>
                                <div style="color:#DB5333" class="digiter-number">123</div>
                                <div>公羔羊</div>
                            </div>
                            <div>
                                <div style="color:#01FFFF" class="digiter-number">123</div>
                                <div>公羔羊</div>
                            </div>
                            <div>
                                <div style="color:#8C2EFF" class="digiter-number">123</div>
                                <div>公羔羊</div>
                            </div>
                            <div>
                                <div style="color:#DB5333" class="digiter-number">123</div>
                                <div>公羔羊</div>
                            </div>
                            <div>
                                <div style="color:#DB5333" class="digiter-number">123</div>
                                <div>公羔羊</div>
                            </div>
                            <div>
                                <div style="color:#DB5333" class="digiter-number">123</div>
                                <div>公羔羊</div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <div class="center">
                <div class="top">
                    <div class="small-header">
                        <div>【年度产量趋势】</div>
                        <div></div>
                    </div>
                    <div class="show_digiter">
                        <div>
                            <div>60万头</div>
                            <div>年产量</div>
                        </div>
                        <div>
                            <div>18个月</div>
                            <div>
                                平均 <br>出栏
                            </div>
                        </div>
                    </div>
                    <div class="hl-charts">
                        <nianduchangliangTwo></nianduchangliangTwo>
                        <!--<Demo></Demo>-->
                    </div>
                </div>
                <div class="bottom">
                    <div class="small-header" style="margin-top: 40px;">
                        <div>【年度出栏销售信息】</div>
                        <div></div>
                    </div>
                    <div class="hl-charts">
                        <nianduchulanxiaoshou></nianduchulanxiaoshou>
                        <!--<Demo></Demo>-->
                    </div>
                    <div class="legend">
                        <div>
                            <div style="color:#DB5333" class="digiter-number">123</div>
                            <div>公羔羊</div>
                        </div>
                        <div>
                            <div style="color:#01FFFF" class="digiter-number">123</div>
                            <div>公羔羊</div>
                        </div>
                        <div>
                            <div style="color:#8C2EFF" class="digiter-number">123</div>
                            <div>公羔羊</div>
                        </div>
                        <div>
                            <div style="color:#DB5333" class="digiter-number">123</div>
                            <div>公羔羊</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="top">
                    <div class="small-header">
                        <div>【月度配种趋势】</div>
                        <div></div>
                    </div>
                    <div class="hl-charts">
                        <!--<Demo></Demo>-->
                        <yuepeizhong></yuepeizhong>
                    </div>
                </div>

                <div class="bottom">
                    <div class="small-header">
                        <div>【业务预警】</div>
                        <div></div>
                    </div>
                    <div class="bottom_content">
                        <div>
                            <div>60</div>
                            <div>待配</div>
                        </div>
                        <div>
                            <div>60</div>
                            <div>待产</div>
                        </div>
                        <div>
                            <div>60</div>
                            <div>待淘汰</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </ContentBox>
</template>

<script>
    import ContentBox from "../../components/common/ContentBox"

    import nianduchushengxinxi from "./ChartsComponents/nianduchushengxinxi"
    import nianduchangliangTwo from "./ChartsComponents/nianduchangliangTwo"
    import nianduchulanxiaoshou from "./ChartsComponents/nianduchulanxiaoshou"
    import yuepeizhong from "./ChartsComponents/yuepeizhong"
    import Demo from "../../components/common/Cahrts/coreEcharts"

    export default {
        components: {
            ContentBox,
            nianduchushengxinxi,
            nianduchangliangTwo,
            nianduchulanxiaoshou,
            yuepeizhong,
            Demo
        }
    }
</script>
<style lang="scss" scoped>
    @import "../../assets/style/config.scss";


    .hl_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        > div {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 100px;
            > span {
                flex: 1;
                font-size: 40px;

                &:first-child {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    > div {
                        min-width: 120px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        img {
                            margin-right: 20px;
                        }
                    }

                }
                &:last-child {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                }

            }
        }
    }

    .digitafarmRight {
        height: 100%;
        width: 100%;
        display: flex;

        > div {
            flex: 1;
            height: 100%;
            /*border: 1px solid #fff;*/

            &.left {
                display: flex;
                flex-direction: column;

                > div {
                    flex: 1;
                    &.top {
                        display: flex;
                        flex-direction: column;
                    }
                    &.content {
                        display: flex;
                        flex-direction: column;

                        > .bottom {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            > .bottom_bottom {
                                height: 40%;
                                display: flex;
                                flex-wrap: wrap;
                                > div {
                                    width: 33%;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    align-items: center;
                                    > div {
                                        font-size: 35px;
                                    }

                                }
                            }
                        }

                    }
                }

            }

            /*background: red;*/
            &.center {
                margin: 0 40px;
                display: flex;
                flex-direction: column;

                > div {
                    &.top {
                        height: 60%;
                        display: flex;
                        flex-direction: column;

                        .hl-charts {
                            flex: 1;
                        }
                        .show_digiter {
                            height: 200px;
                            display: flex;

                            > div {
                                flex: 1;
                                margin-top: 10px;
                                background: url(../../assets/image/nclwenzibg.png) no-repeat;
                                background-position: center;
                                background-size: 35% 100%;

                                > div {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    font-size: 28px;

                                    &:first-child {
                                        margin-top: 10px;
                                        color: #00E4FF;

                                    }
                                    &:last-child {
                                        margin-top: 75px;
                                        font-size: 36px;
                                    }

                                }
                            }
                        }

                    }
                    &.bottom {
                        height: 40%;

                        display: flex;
                        flex-direction: column;
                        .hl-charts {
                            flex: 1;
                        }
                        .legend {
                            height: 100px;
                            display: flex;
                            padding: 0 100px;
                            > div {
                                width: 25%;
                                > div {
                                    font-size: 35px;

                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }
                            }
                        }

                    }
                }

            }

            &.right {
                display: flex;
                flex-direction: column;
                > div {
                    &.top {
                        height: 60%;
                        display: flex;
                        flex-direction: column;

                        .hl-charts {
                            flex: 1;
                        }

                    }

                    &.bottom {
                        margin-top: 40px;
                        height: 40%;
                        display: flex;
                        flex-direction: column;

                        .bottom_content {
                            display: flex;
                            flex: 1;
                            > div {
                                flex: 1;
                                background: url(../../assets/image/nclwenzibg.png) no-repeat;
                                background-position: center;
                                background-size: 60% 80%;

                                /*display: flex;*/
                                /*flex-direction: column;*/
                                /*justify-content: center;*/
                                /*align-items: center;*/

                                >div{
                                    font-size:40px;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    font-size: 34px;
                                    &:first-child{
                                        margin-top: 50px;
                                        color: #01EAFF;
                                    }
                                    &:last-child{
                                        margin-top:130px;
                                    }
                                }
                            }

                        }
                    }
                }
            }
        }

    }

</style>
